<template>
    <a-layout style="min-height: 100vh">
        <!-- 侧边栏 -->
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
            <div class="logo">管理系统</div>
            <a-menu theme="dark" @click="handleMenuClick" mode="inline" :selectedKeys="[selectedKey]">
                <a-menu-item key="dashboard">
                    <template #icon>
                        <BarChartOutlined />
                    </template>
                    仪表盘
                </a-menu-item>
                <a-menu-item key="usermanager">
                    <template #icon>
                        <UserOutlined />
                    </template>
                    用户管理
                </a-menu-item>
                <a-menu-item key="rolemanager">
                    <template #icon>
                        <RobotOutlined />
                    </template>
                    角色管理
                </a-menu-item>
                <a-menu-item key="permissionmanager">
                    <template #icon>
                        <IdcardOutlined />
                    </template>
                    权限管理
                </a-menu-item>
                <a-menu-item key="interfacemanager">
                    <template #icon>
                        <ApiOutlined />
                    </template>
                    接口管理
                </a-menu-item>
                <a-menu-item key="logmanager">
                    <template #icon>
                        <ContainerOutlined />
                    </template>
                    日志管理
                </a-menu-item>
                <a-menu-item key="resourcemanager">
                    <template #icon>
                       <FileOutlined />
                    </template>
                    资源管理
                </a-menu-item>
                <a-menu-item key="systemsettings">
                    <template #icon>
                        <SettingOutlined />
                    </template>
                    系统设置
                </a-menu-item>
                <a-menu-item key="datamanager">
                    <template #icon>
                        <DatabaseOutlined />
                    </template>
                    数据管理
                </a-menu-item>
            </a-menu>
        </a-layout-sider>

        <!-- 右侧主布局 -->
        <a-layout>
            <!-- 顶部导航 -->
            <a-layout-header
                style="background: #fff; padding: 0 16px; display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <a-button type="text" @click="collapsed = !collapsed">
                        <MenuFoldOutlined v-if="collapsed" />
                        <MenuUnfoldOutlined v-else />
                    </a-button>
                </div>
                <div>
                    <a-dropdown>
                        <a class="ant-dropdown-link" @click.prevent>
                            Admin
                            <DownOutlined />
                        </a>
                        <template #overlay>
                            <a-menu  @click="handleOporeateMenuClick">
                                <a-menu-item key="profile">个人中心</a-menu-item>
                                <a-menu-item key="logout">退出登录</a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </a-layout-header>

            <!-- 内容区 -->
            <a-layout-content style="margin: 16px; background: #fff; padding: 16px">
                <router-view />
            </a-layout-content>

            <!-- 底部 -->
            <a-layout-footer style="text-align: center;">
                管理系统 ©2025 Created by You
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
import {
    UserOutlined,
    SettingOutlined,
    DatabaseOutlined,
    RobotOutlined,
    IdcardOutlined,
    ApiOutlined,
    MenuFoldOutlined,
    ContainerOutlined,
    MenuUnfoldOutlined,
    DownOutlined,
    BarChartOutlined,
    FileOutlined
} from '@ant-design/icons-vue'

const collapsed = ref(false)
const selectedKey = ref('dashboard')
const handleMenuClick = (info) => {
    // info.key 就是 <a-menu-item key="xxx"> 里的 key
    selectedKey.value = info.key

    switch (info.key) {
        case 'dashboard':
            router.push('/')
            break
        case 'usermanager':
            router.push('/user-manager')
            break
        case 'rolemanager':
            router.push('/role-manager')
            break
        case 'permissionmanager':
            router.push('/permission-manager')
            break
        case 'interfacemanager':
            router.push('/interface-manager')
            break
        case 'logmanager':
            router.push('/log-manager')
            break
        case 'systemsettings':
            router.push('/system-settings')
            break
        case 'datamanager':
            router.push('/data-manager')
            break
        case 'resourcemanager':
            router.push('/resource-manager')
            break
    }
}

const handleOporeateMenuClick = ({ key }) => {
  if (key === "profile") {
    // 跳转到个人中心
    router.push({ name: "UserProfile" }); // 确保你的路由里配置了 UserProfile
  } else if (key === "logout") {
    // 清除登录状态
    localStorage.removeItem("token");
    sessionStorage.removeItem("token");
    // 跳转到登录页
    router.push({ name: "Login" });
  }
};
</script>

<style>
.logo {
    height: 32px;
    margin: 16px;
    color: white;
    font-weight: bold;
    text-align: center;
}
</style>
